<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>xwaf验证码校验</title>
    <style>
        div.styled-text {
            color: #333; /* 文本颜色，使用深灰色 */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 字体样式，使用无衬线字体 */
            font-size: 20px; /* 字体大小 */
            line-height: 30px; /* 行高，使文本更易读 */
            text-align: justify; /* 文本对齐方式，两端对齐 */
            margin: 5px; /* 外边距，控制div与其他元素的距离 */
            padding: 8px; /* 内边距，控制文本与div边框的距离 */
            background-color: #009688; /* 背景颜色，使用浅灰色 */
            border-radius: 2px; /* 圆角大小 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
            color: #faf8f8;
        }

        /* 可选：为div添加一个悬停效果 */
        div.styled-text:hover {
            background-color: #ececec; /* 悬停时的背景颜色，稍微变深一点 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .input {
            width: 200px;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 18px;
            box-sizing: border-box;
            padding: 8px;
            margin-top: 10px;
        }

        .label {
            font-size: 18px;
            color: #333333;
            float: left;
            margin-right: 5px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            margin: 20px;
        }

        .btn {
            width: 100px;
            height: 40px;
            border: none;
            background-color: #009688;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #4662d9;
        }
    </style>
</head>
<body>

    <div class="label">验证码: </div>
    <div class="styled-text" style="float: left;margin-right: 10px;" id="code-output"></div>
    <div>
        <input class="input" type="text" id="code-input" placeholder="请输入验证码">
        <button class="btn" onclick="verifyCode()">提交</button>
    </div>
</body>
<script>
var code;
function createCode() {
    code = '';
    var codeLength = 6; //验证码长度
    var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,
                                'a','b','c','d','e','f','g','h','i','j',
                                'k','l','m','n','o','p','q','r','s','t',
                                'u','v','w','x','y','z','A','B','C','D',
                                'E','F','G','H','I','J','K','L','M','N',
                                'O','P','Q','R','S','T','U','V','W','X','Y','Z');
    for (var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random() * 62); //取得随机数的索引（0~35）
        code += selectChar[index]; //根据索引取得随机数加到code上
    }
    let myDiv = document.getElementById("code-output");
    myDiv.innerText = code;
    //document.getElementById('code-input').value = code; //把code值赋给验证码文本框
}

function getQueryString(name) {
  	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  	let r = window.location.search.substr(1).match(reg);
  	if (r != null) {
      	return unescape(r[2]);
  	};
  	return null;
}

function verifyCode() {
    //获取用户输入的验证码并与生成的验证码进行比较
    var inputCode = document.getElementById('code-input').value;
    if(inputCode.length <= 0) {
        alert('请输入验证码！');
    } else if(inputCode.toUpperCase() != code.toUpperCase()) {
        alert("验证码输入有误！");
        createCode();//刷新验证码
    }else {
        //alert('验证码正确！');
       var url = getQueryString("srcUrl");
        window.location.href = url;
    }
}
createCode()
</script>
</html>